<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none; width: 100%">
      <h1 class="title" style="width: 480px; margin-left: 27%">{{ $t(`Print.Fujian`) }}:{{ factoryName }}:{{ $t(`Print.FootwearCoLtdPackagingMaterialDeliveryList`) }}</h1>
      <div style="width: 95%; margin: auto">
        <div style="display: flex; width: 100%; font-size: 13px; justify-content: space-between">
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.OutboundOrderNumber`) }}:{{ slipNoList3[0]?.slipNo }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.OutboundDateDate`) }}:{{ slipNoList3[0]?.slipDate }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.Department`) }}:{{ slipNoList3[0]?.deptName }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.TabulatedDate`) }}:{{ formatCurrentDateTime(currentDate) }}</h2>
        </div>

        <div style="width: 100%">
          <table style="width: 100%; font-size: 13px">
            <thead>
              <tr>
                <th>{{ $t(`Print.Directives`) }}</th>
                <th>{{ $t(`Print.MaterialColorKey`) }}</th>
                <th>{{ $t(`Print.MaterialName`) }}</th>
                <th>{{ $t(`Print.Specification`) }}</th>
                <th>{{ $t(`Print.Unit`) }}</th>
                <th>{{ $t(`Print.Quantity`) }}</th>
                <th>{{ $t(`Print.UnitPrice`) }}</th>
                <th>{{ $t(`Print.Amount`) }}</th>
                <th>{{ $t(`Print.Remark`) }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(iten1, index) in slipNoList3" :key="index">
                <td>{{ iten1.lotNo }}</td>

                <td>{{ iten1.mtlColor }}</td>
                <td>{{ iten1.mtlName }}</td>
                <td>{{ iten1.mtlSpec }}</td>
                <td>{{ iten1.mtlUnit }}</td>

                <td>{{ iten1.qty }}</td>

                <td>{{ iten1.price }}</td>
                <td>{{ iten1.amt }}</td>

                <td>{{ iten1.remark }}</td>
                <!-- 更多的数据单元格 -->
              </tr>
              <!-- 更多的行 -->
            </tbody>
            <!-- 可选的 tfoot 部分 -->
          </table>

          <!-- <Table :tableHeader="tableHeader5" :tableData="slipNoList" /> -->
        </div>

        <div style="display: flex; justify-content: space-between; width: 85%; font-size: 17px; width: 80%; margin: auto">
          <h2 style="font-size: 13px">{{ $t(`Print.Picker_`) }}:</h2>
          <h2 style="font-size: 13px">{{ $t(`Print.WarehouseSupervisor`) }}:</h2>
          <h2 style="font-size: 13px">{{ $t(`Print.WarehouseKeeper`) }}:{{ userInfo?.chiName }}</h2>
        </div>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" @Launchform="Launchform1" />

    <el-card shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex; margin-top: 5px">
        <div style="width: 50%">
          <h1>{{ $t(`Print.PendingOutboundDetails`) }}</h1>
          <Table
            :summaryData="summaryData1"
            summary
            :isLoading="isLoading"
            @inputChange="confirmChange1"
            @currentRow="currentRowList"
            :tableHeader="tableHeader"
            :tableData="QueryDetailsToBeStoredMethodsTableDateList"
            :TableHeight="100"
            :outTableHeight="55"
          />
        </div>
        <div style="width: 50%; margin-left: 10px">
          <h1>{{ $t(`Print.OutboundDetailsOfPackagingMaterials`) }}</h1>
          <Table
            :isLoading="isLoading3"
            @currentRow="currentRowList2"
            :tableHeader="tableHeader1"
            :tableData="CheckTheDetailsOfPackingMaterialDeliveryMethodsTableDateList"
            :TableHeight="100"
            :outTableHeight="55"
          />
          <PageModule
            style="margin-top: 5px"
            :PageData="{ total: totalList1 }"
            @pageChange="handleSizeChange1"
            @pageSizeChange="handleCurrentChange1"
          />
        </div>
      </div>
    </el-card>

    <!-- 选择指令材料 -->
    <el-drawer v-model="drawer2" :direction="'ttb'" size="small" :with-header="false">
      <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList3" @Launchform="Launchform" @findClicked="findData1" />
      <div style="width: 60%">
        <Table
          @checkboxChange="change"
          class="table1"
          style="margin-top: 15px"
          :isLoading="isLoading1"
          :tableHeader="tableHeader5"
          :tableData="SelectiveInstructionQueryMethodsTableDateList.dtos"
          :TableHeight="100"
          :outTableHeight="55"
        />
        <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChangeTk" @pageChange="handleCurrentChangeTk" />
      </div>
    </el-drawer>

    <el-drawer v-model="drawer3" :direction="'ttb'" size="small" :with-header="false">
      <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList2" @Launchform="Launchform2" @findClicked="findData2" />
      <div style="width: 60%">
        <Table
          @currentRow="currentRowList3"
          class="table1"
          style="margin-top: 15px"
          :isLoading="isLoading2"
          :tableHeader="tableHeader2"
          :tableData="SelectCommonMaterialsMethodsTableDateList.dtos"
          :TableHeight="100"
          :outTableHeight="55"
        />
        <PageModule :PageData="{ total: totalList }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import {
  CkassifyName,
  SelectCommonMaterials,
  type SelectCommonMaterialsInterface,
  type SelectCommonMaterialsParms
} from '@/api/WarehouseDepartment/FactoryStorage/PackagingMaterialStorageOperation'
import { ElMessage, ElMessageBox } from 'element-plus'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'PackagingMaterialOutboundOperation'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  OutboundBatchProcessingAdded,
  PreTreatmentOfMaterialsOutOfStorage,
  PackingMaterialDeliveryDetailsDeleted,
  DetailsToBeReleasedAreDeleted,
  CheckTheDetailsOfPackingMaterialDelivery,
  QueryDetailsToBeStored,
  DepartmentInquiry,
  SelectiveInstructionQuery
} from '@/api/WarehouseDepartment/FactoryStorage/PackagingMaterialOutboundOperation'
import type {
  OutboundBatchProcessingAddedParms,
  SelectiveInstructionQueryInterface,
  SelectiveInstructionQueryParms
} from '@/api/WarehouseDepartment/FactoryStorage/PackagingMaterialOutboundOperation'

const slipNoList3 = ref<any>([])
// 通过sessionStorage获取工厂名称
const userInfo2 = JSON.parse(sessionStorage.getItem('userInfo') || '{}')
const factoryName = userInfo2.abbrName
// 日期
const formatCurrentDateTime = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const currentDate = ref<any>(new Date())

const printQRCode = () => {
  const qrCodeContainer = document.querySelector<any>('.qrCodeContainer')
  if (qrCodeContainer) {
    // 临时显示 .qrCodeContainer 以获取其内容
    qrCodeContainer.style.display = 'block'

    const printWindow = window.open('', '_blank')
    printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印指令领料作业</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
               

            table, th, td {
                    border: 1px solid black; 
                    border-collapse: collapse; 
                    text-align: center;
                  }
                  th, td {
                    padding: 5px; /* 设置内边距 */
                    text-align: left; /* 设置文本对齐方式 */
                    text-align: center;
                    font-size:11px
                  }
                  .double-line {
                    border-top: 2px dashed red; 
                    border-bottom: 2px dashed red; 
                    text-align: center;
                  }
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

    // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
    const cloneContainer = qrCodeContainer.cloneNode(true)
    printWindow!.document.body.appendChild(cloneContainer)

    printWindow!.document.write(`
        </body>
      </html>
    `)
    printWindow!.document.close()

    // 开始打印
    printWindow!.print()

    // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
    qrCodeContainer.style.display = 'none'
  }
}

const isLoading = ref(false)

const isLoading3 = ref(false)

const formList1 = ref([
  {
    type: 'button',
    checkboxLabel: '选择指令材料'
  },
  {
    type: 'button',
    checkboxLabel: '选择库存材料'
  },
  {
    type: 'dateSingle',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '部门',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库原因',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: 1,
        optionValue: '材料入库',
        optionLabel: '材料入库'
      },
      {
        optionKey: 2,
        optionValue: '盘盈调整',
        optionLabel: '盘盈调整'
      },
      {
        optionKey: 3,
        optionValue: '现金入库',
        optionLabel: '现金入库'
      }
    ]
  },
  {
    type: 'button',
    checkboxLabel: '出库批处理'
  },
  {
    type: 'button',
    checkboxLabel: '打印'
  },

  {
    type: 'input',
    inputPlaceholder: '请输入出库单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出库原因',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: 1,
        optionValue: '材料入库',
        optionLabel: '材料入库'
      },
      {
        optionKey: 2,
        optionValue: '盘盈调整',
        optionLabel: '盘盈调整'
      },
      {
        optionKey: 3,
        optionValue: '现金入库',
        optionLabel: '现金入库'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '出库日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '待出库明细删除'
  },
  {
    type: 'button',
    checkboxLabel: '包材材料出库明细删除'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList3 = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '材料出库预处理'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList2 = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入料号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料规格',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '待入库批处理'
  }
])

// 入库明细更新
const confirmChange1 = async (row: any) => {
  row.remark === null ? (row.remark = '') : row.remark
  row.qty === null ? (row.qty = null) : row.qty
  const result = await LoginWork.post<any, any>(`/pcFactorStockQuery/packOutTempUp?item=${row.item}&qty=${row.qty}&remark=${row.remark}`)
  if (result.code === 200) {
    QueryDetailsToBeStoredMethods()
    JMessage.success(result.message)
  } else {
    QueryDetailsToBeStoredMethods()
    JMessage.error(result.message)
  }
}

// 包材材料出库明细新增
const OutboundBatchProcessingAddedMethodsParms = ref<OutboundBatchProcessingAddedParms>({
  deptName: '',
  deptNo: '',
  item: [],
  mtlNo: '',
  sendNo: '',
  slipDate: '',
  slipReason: '',
  sysDate: '',
  vendorName: '',
  vendorNo: ''
})

const OutboundBatchProcessingAddedMethods = async () => {
  const result = await OutboundBatchProcessingAdded(OutboundBatchProcessingAddedMethodsParms.value)
  if (result.code === 200) {
    QueryDetailsToBeStoredMethods()
    CheckTheDetailsOfPackingMaterialDeliveryMethods()
    OutboundBatchProcessingAddedMethodsParms.value.item = []
    JMessage.success(result.message)
  } else {
    QueryDetailsToBeStoredMethods()
    CheckTheDetailsOfPackingMaterialDeliveryMethods()
    OutboundBatchProcessingAddedMethodsParms.value.item = []
    JMessage.error(result.message)
  }
}

// 材料出库预处理
const currentRowList3 = (row: any) => {
  const { mtlNo } = row
  PreTreatmentOfMaterialsOutOfStorageMethodsParms.value.push({ mtlNo, lotNo: null })
}

const change = (row: any, list: any) => {
  const { mtlNo, lotNo } = list
  PreTreatmentOfMaterialsOutOfStorageMethodsParms.value.push({ mtlNo, lotNo })
}

const PreTreatmentOfMaterialsOutOfStorageMethodsParms = ref<any>([])

const PreTreatmentOfMaterialsOutOfStorageMethods = async () => {
  const result = await PreTreatmentOfMaterialsOutOfStorage(PreTreatmentOfMaterialsOutOfStorageMethodsParms.value)
  if (result.code === 200) {
    QueryDetailsToBeStoredMethods()
    SelectiveInstructionQueryMethods()
    PreTreatmentOfMaterialsOutOfStorageMethodsParms.value = []
    JMessage.success(result.message)
  } else {
    SelectiveInstructionQueryMethods()
    PreTreatmentOfMaterialsOutOfStorageMethodsParms.value = []
    QueryDetailsToBeStoredMethods()
    JMessage.error(result.message)
  }
}

// 包材出库明细删除
const slipNoList = ref('')

const itemList = ref('')

const currentRowList2 = (row: any) => {
  console.log(row)
  const { slipNo, item } = row
  slipNoList.value = slipNo
  itemList.value = item
  slipNoList3.value = CheckTheDetailsOfPackingMaterialDeliveryMethodsTableDateList.value.filter((item: any) => row.slipNo === item.slipNo)
}

const PackingMaterialDeliveryDetailsDeletedMethods = async () => {
  const result = await PackingMaterialDeliveryDetailsDeleted(itemList.value, slipNoList.value)
  if (result.code === 200) {
    slipNoList.value = ''
    itemList.value = ''
    CheckTheDetailsOfPackingMaterialDeliveryMethods()
    JMessage.success(result.message)
  } else {
    slipNoList.value = ''
    itemList.value = ''
    CheckTheDetailsOfPackingMaterialDeliveryMethods()
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除数据吗?')
    .then(async () => {
      PackingMaterialDeliveryDetailsDeletedMethods()
    })
    .catch(() => {})
}

// 待出库明细删除
const DetailsToBeReleasedAreDeletedMethodsParms = ref('')

const currentRowList = (row: any) => {
  const { item } = row
  console.log(row)
  DetailsToBeReleasedAreDeletedMethodsParms.value = item

  OutboundBatchProcessingAddedMethodsParms.value.mtlNo = ''
  OutboundBatchProcessingAddedMethodsParms.value.item.push(item) as any
}

const DetailsToBeReleasedAreDeletedMethods = async () => {
  const result = await DetailsToBeReleasedAreDeleted(DetailsToBeReleasedAreDeletedMethodsParms.value)
  if (result.code === 200) {
    QueryDetailsToBeStoredMethods()
    DetailsToBeReleasedAreDeletedMethodsParms.value = ''
    JMessage.success(result.message)
  } else {
    DetailsToBeReleasedAreDeletedMethodsParms.value = ''
    QueryDetailsToBeStoredMethods()
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc5 = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除数据吗?')
    .then(async () => {
      DetailsToBeReleasedAreDeletedMethods()
    })
    .catch(() => {})
}

const formatCurrentDateTime1 = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day}`
}

// 包材材料出库明细
const Launchform1 = (row: any) => {
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.slipNo = row[7].inputValue
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.lotNo = row[8].inputValue
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.slipReason = row[9].selectValue
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.slipDateStart = row[10].dateValue[0]
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.slipDateEnd = row[10].dateValue[1]
  CheckTheDetailsOfPackingMaterialDeliveryMethods()

  OutboundBatchProcessingAddedMethodsParms.value.slipDate = row[2].dateValue

  OutboundBatchProcessingAddedMethodsParms.value.deptName = row[3].selectValue.split(' ')[1]
  OutboundBatchProcessingAddedMethodsParms.value.deptNo = row[3].selectValue.split(' ')[0]
  OutboundBatchProcessingAddedMethodsParms.value.slipReason = row[4].selectValue
}

const CheckTheDetailsOfPackingMaterialDeliveryMethodsTableDateList = ref([])

const CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs = ref({
  lotNo: '',
  mtlName: '',
  sendNo: '',
  slipDateEnd: '',
  slipDateStart: '',
  slipNo: '',
  slipReason: '',
  sysDateEnd: '',
  sysDateStart: '',
  vendorNo: '',
  pageSize: 40,
  pageNum: 1
})

const CheckTheDetailsOfPackingMaterialDeliveryMethods = async () => {
  isLoading3.value = true
  const result = await CheckTheDetailsOfPackingMaterialDelivery(CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value)
  CheckTheDetailsOfPackingMaterialDeliveryMethodsTableDateList.value = result.list
  totalList1.value = result.total
  isLoading3.value = false
}

const totalList1 = ref(0)

const handleSizeChange1 = (val: number) => {
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.pageNum = val
  CheckTheDetailsOfPackingMaterialDeliveryMethods()
}

const handleCurrentChange1 = (val: number) => {
  CheckTheDetailsOfPackingMaterialDeliveryMethodsPamrs.value.pageSize = val
  CheckTheDetailsOfPackingMaterialDeliveryMethods()
}

// 待入库明细查询
const QueryDetailsToBeStoredMethodsTableDateList = ref([])

const summaryData1 = ref<any[]>([
  {
    index: 7,
    num: 0
  }
])

const calculateSum = (items: any) => {
  summaryData1.value[0].num = items.reduce((accumulator: any, item: any) => {
    return accumulator + (item.qty || 0) // 累加 qty 字段的值
  }, 0)
}

const QueryDetailsToBeStoredMethods = async () => {
  isLoading.value = true
  const result = await QueryDetailsToBeStored()
  QueryDetailsToBeStoredMethodsTableDateList.value = result.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  calculateSum(QueryDetailsToBeStoredMethodsTableDateList.value)
  isLoading.value = false
}

const findData = (count: string) => {
  if (count === '选择指令材料') {
    drawer2.value = true
    SelectiveInstructionQueryMethods()
  }
  if (count === '选择库存材料') {
    drawer3.value = true
    SelectCommonMaterialsMethods()
  }
  if (count === '待出库明细删除') {
    if (DetailsToBeReleasedAreDeletedMethodsParms.value === '') {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc5()
    }
  }
  if (count === '包材材料出库明细删除') {
    if (slipNoList.value === '') {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc()
    }
  }

  if (count === '出库批处理') {
    if (OutboundBatchProcessingAddedMethodsParms.value.vendorName === undefined || OutboundBatchProcessingAddedMethodsParms.value.slipDate === '') {
      JMessage.warning('数据不完整')
    } else {
      OutboundBatchProcessingAddedMethods()
    }
  }

  if (count === '置空') {
    clearFormList2()
  }

  if (count === '打印') {
    console.log(slipNoList3.value)
    if (slipNoList3.value.length === 0) {
      JMessage.warning('请点击需要打印的数据')
    } else if (slipNoList3.value[0].slipNo === null) {
      JMessage.warning('请选择有出库单号的进行打印')
    } else {
      printQRCode()
    }
  }
}

const clearFormList2 = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
    if (item.type === 'dateSingle') {
      item.dateValue = ''
    }
  })
}

const findData2 = (count: string) => {
  if (count === '置空') {
    clearFormList1()
  }
  if (count === '待入库批处理') {
    if (PreTreatmentOfMaterialsOutOfStorageMethodsParms.value.length === 0) {
      JMessage.warning('请选择需要出库的数据')
    } else {
      PreTreatmentOfMaterialsOutOfStorageMethods()
    }
  }
}

const Launchform2 = (row: any) => {
  SelectCommonMaterialsMethodsParms.value.mtlTypeL = row[0].selectValue.split(' ')[0]
  SelectCommonMaterialsMethodsParms.value.mtlNo = row[1].inputValue
  SelectCommonMaterialsMethodsParms.value.mtlName = row[2].inputValue
  SelectCommonMaterialsMethodsParms.value.mtlSpec = row[3].inputValue
  SelectCommonMaterialsMethods()
}

const clearFormList1 = () => {
  formList2.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}
const drawer3 = ref(false)

const isLoading2 = ref(false)

const SelectCommonMaterialsMethodsParms = ref<SelectCommonMaterialsParms>({
  mtlName: '',
  mtlNo: '',
  mtlSpec: '',
  mtlTypeL: '',
  mtlTypeS: '',
  pageNum: 1,
  pageSize: 40
})

const SelectCommonMaterialsMethodsTableDateList = ref<SelectCommonMaterialsInterface>({
  dtos: []
})

const SelectCommonMaterialsMethods = async () => {
  isLoading2.value = true
  const result = await SelectCommonMaterials(SelectCommonMaterialsMethodsParms.value)
  SelectCommonMaterialsMethodsTableDateList.value.dtos = result.dtos.map((item: any) => {
    item.stkQty = Number(item.stkQty).toFixed(0)
    item.disableConfirm = true
    return item
  })
  totalList.value = result.total!
  isLoading2.value = false
}

const totalList = ref(0)

const handleSizeChange = (val: number) => {
  SelectCommonMaterialsMethodsParms.value.pageSize = val
  SelectCommonMaterialsMethods()
}

const handleCurrentChange = (val: number) => {
  SelectCommonMaterialsMethodsParms.value.pageNum = val
  SelectCommonMaterialsMethods()
}

// 选择指令材料
const TreasurySinglePositionMethods = async () => {
  let NewArray = []
  const result = await CkassifyName()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.typeNo && item.typeName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  formList3.value[0].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
  formList2.value[0].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const findData1 = (row: any) => {
  if (row === '置空') {
    clearFormList()
  }
  if (row === '材料出库预处理') {
    if (PreTreatmentOfMaterialsOutOfStorageMethodsParms.value.length === 0) {
      JMessage.warning('请选择需要出库的数据')
    } else {
      PreTreatmentOfMaterialsOutOfStorageMethods()
    }
  }
}

const clearFormList = () => {
  formList3.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}

const Launchform = (row: any) => {
  SelectiveInstructionQueryMethodsPamrs.value.typeNo = row[0].selectValue.split(' ')[0]
  SelectiveInstructionQueryMethodsPamrs.value.mtlName = row[1].inputValue
  SelectiveInstructionQueryMethodsPamrs.value.lotNo = row[2].inputValue
  SelectiveInstructionQueryMethods()
}

const drawer2 = ref(false)

const isLoading1 = ref(false)

const SelectiveInstructionQueryMethodsPamrs = ref<SelectiveInstructionQueryParms>({
  lotNo: '',
  mtlName: '',
  mtlSpec: '',
  pageNum: 1,
  pageSize: 40,
  purNo: '',
  style: '',
  typeNo: '',
  vendorName: ''
})

const SelectiveInstructionQueryMethodsTableDateList = ref<SelectiveInstructionQueryInterface>({
  dtos: []
})

const SelectiveInstructionQueryMethods = async () => {
  isLoading1.value = true
  const result = await SelectiveInstructionQuery(SelectiveInstructionQueryMethodsPamrs.value)
  SelectiveInstructionQueryMethodsTableDateList.value.dtos = result.dtos.map((item: any) => {
    item.change = 'Y'
    item.outQty = Number(item.stkQty) - Number(item.ttlUsage)
    if (item.outQty === 0) {
      item.backgroundColor = '#80FF00'
      item.change = ''
    }
    item.qty = null
    item.cfmFlag = false
    return item
  })
  total.value = result.total!
  isLoading1.value = false
}

const total = ref(0)

const handleSizeChangeTk = (val: number) => {
  SelectiveInstructionQueryMethodsPamrs.value.pageSize = val
  SelectiveInstructionQueryMethods()
}

const handleCurrentChangeTk = (val: number) => {
  SelectiveInstructionQueryMethodsPamrs.value.pageNum = val
  SelectiveInstructionQueryMethods()
}

// 部门查询
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const DepartmentInquiryMethods = async () => {
  let NewArray = []
  const result = await DepartmentInquiry()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.deptNo && item.deptName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.deptNo + ' ' + item.deptName)
    }
    return arr
  }, [])
  formList1.value[3].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 用户信息
const userInfo = ref()

onMounted(() => {
  DepartmentInquiryMethods()

  TreasurySinglePositionMethods()

  QueryDetailsToBeStoredMethods()

  CheckTheDetailsOfPackingMaterialDeliveryMethods()

  let userInf = sessionStorage.getItem('userInfo')

  userInfo.value = JSON.parse(userInf!)
})

// 表格数据

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo',
    change: true
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '55',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '55',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '55',
    change: true
  },
  {
    label: '库存量',
    prop: 'stkQty',
    change: true
  },
  {
    label: '数量',
    prop: 'qty',
    width: '55'
  }
])

const tableHeader1 = ref([
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '出库单号',
    prop: 'slipNo'
  },
  {
    label: '出库日期',
    prop: 'slipDate'
  },
  {
    label: '出库原因',
    prop: 'slipReason'
  },
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    width: '55'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '物料编号',
    prop: 'mtlNo',
    width: '55'
  },
  {
    label: '仓管员',
    prop: 'sysUser',
    width: '55'
  },
  {
    label: '备注',
    prop: 'remark',
    width: '55'
  }
])

const tableHeader5 = ref([
  {
    label: '指令',
    prop: 'lotNo',
    width: '90',
    change: true
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    backgroundColor: true,
    change: true
  },
  {
    label: '分类名称',
    prop: 'mtlType',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '55',
    change: true
  },
  {
    label: '颜色',
    prop: 'mtlColor',
    width: '55',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '55',
    change: true
  },
  {
    label: '库存量',
    prop: 'stkQty',
    width: '55',
    change: true
  },
  {
    label: '需求量',
    prop: 'ttlUsage',
    width: '55',
    change: true
  },
  {
    label: '可出数量',
    prop: 'outQty',
    width: '55',
    change: true
  },
  {
    label: '',
    prop: 'cfmFlag',
    width: '55',
    type: 'checkbox'
  }
])

const tableHeader2 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '分类名称',
    prop: 'mtlTypeName'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.table1 {
  :deep(th:nth-child(10)) {
    color: #0000ff !important;
  }
}
</style>
